<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-family: Helvetica Neue, Arial, sans-serif;
				font-size: 14px;
				color: #444;
			}
			
			table {
				border: 2px solid #42b983;
				border-radius: 3px;
				background-color: #fff;
			}
			
			th {
				background-color: #42b983;
				color: rgba(255, 255, 255, 0.66);
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			td {
				background-color: #f9f9f9;
			}
			
			th,
			td {
				min-width: 120px;
				padding: 10px 20px;
			}
			
			th.active {
				color: #fff;
			}
			
			th.active .arrow {
				opacity: 1;
			}
			
			.arrow {
				display: inline-block;
				vertical-align: middle;
				width: 0;
				height: 0;
				margin-left: 5px;
				opacity: 0.66;
			}
			
			.arrow.asc {
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 4px solid #fff;
			}
			
			.arrow.dsc {
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 4px solid #fff;
			}
		</style>
	</head>

	<body>
		<!-- component template -->
		<script type="text/x-template" id="grid-template">
			<table>
				<thead>
					<tr>
						<th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">
							{{ key | capitalize }}
							<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="entry in filteredData">
						<td v-for="key in columns">
							{{entry[key]}}
						</td>
					</tr>
				</tbody>
			</table>
		</script>

		<!-- demo root element -->
		<div id="demo">
			<form id="search">
				Search <input name="query" v-model="searchQuery">
			</form>
			<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
			</demo-grid>
		</div>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// register the grid component
			Vue.component('demo-grid', {
				template: '#grid-template',
				props: {
					data: Array,
					columns: Array,
					filterKey: String
				},
				data: function() {
					var sortOrders = {}
					this.columns.forEach(function(key) {
						sortOrders[key] = 1
					})
					return {
						sortKey: '',
						sortOrders: sortOrders
					}
				},
				computed: {
					filteredData: function() {
						var sortKey = this.sortKey
						var filterKey = this.filterKey && this.filterKey.toLowerCase()
						var order = this.sortOrders[sortKey] || 1
						var data = this.data
						if(filterKey) {//搜索
							data = data.filter(function(row) {
								return Object.keys(row).some(function(key) {
									return String(row[key]).toLowerCase().indexOf(filterKey) > -1
								})
							})
						}
						if(sortKey) {//排序
							data = data.slice().sort(function(a, b) {
								a = a[sortKey]
								b = b[sortKey]
								return(a === b ? 0 : a > b ? 1 : -1) * order
							})
						}
						return data
					} 
				},
				filters: {
					capitalize: function(str) {
						return str.charAt(0).toUpperCase() + str.slice(1)
					}
				},
				methods: {
					sortBy: function(key) {
						this.sortKey = key
						this.sortOrders[key] = this.sortOrders[key] * -1
					}
				}
			})

			// bootstrap the demo
			var demo = new Vue({
				el: '#demo',
				data: {
					searchQuery: '',
					gridColumns: ['name', 'power'],
					gridData: [{
							name: 'Chuck Norris',
							power: Infinity
						},
						{
							name: 'Bruce Lee',
							power: 9000
						},
						{
							name: 'Jackie Chan',
							power: 7000
						},
						{
							name: 'Jet Li',
							power: 8000
						}
					]
				}
			})
		</script>
	</body>

</html>